<template>
    <div class="setting-web-info-box">
        <el-form :ref="formName" :model="webSizeInfo" label-width="80px">
            <el-form-item label="网站名称" label-width="100px"
                          prop="webSizeTitle"
                          :rules="[{ required: true, message: '请输入网站名称', trigger: 'blur'}]">
                <el-input v-model="webSizeInfo.webSizeTitle" placeholder="输入网站名称"></el-input>
            </el-form-item>
            <el-form-item label="网站关键字" label-width="100px" prop="keywords"
                          :rules="[{ required: true, message: '请输入网站关键字', trigger: 'blur'}]">
                <el-input v-model="webSizeInfo.keywords" placeholder="输入网站关键字"></el-input>
            </el-form-item>
            <el-form-item label="网站描述" label-width="100px"
                          prop="description"
                          :rules="[{ required: true, message: '请输入网站描述', trigger: 'blur'}]">
                <el-input v-model="webSizeInfo.description" type="textarea" placeholder="输入网站描述"></el-input>
            </el-form-item>
            <el-form-item label-width="100px">
                <el-button type="primary" size="small" @click="updateWebInfo()">更新</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>
import {getSeoInfo, getWebSizeTitle, updateSeoInfo, updateWebSizeTitle} from "@/api/web-size-info-admin-api";
import {success_code} from "@/utils/ResponseState";

export default {
    name: "websize-info",
    data() {
        return {
            formName: 'websize-info-form',
            webSizeInfo: {
                webSizeTitle: '',
                keywords: '',
                description: ''
            }
        }
    },
    methods: {
        initData() {
            getSeoInfo().then(result => {
                if (result.code === success_code) {
                    this.webSizeInfo.description = result.data.web_size_description;
                    this.webSizeInfo.keywords = result.data.web_size_keywords;
                }
            })

            getWebSizeTitle().then(result => {
                if (result.code === success_code) {
                    this.webSizeInfo.webSizeTitle = result.data.value;
                }
            })
        },
        updateWebInfo() {
            // check data
            this.$refs[this.formName].validate((valid) => {
                if (valid) {
                    // submit data
                    updateSeoInfo(this.webSizeInfo.keywords, this.webSizeInfo.description).then(result => {
                        if (result.code !== success_code) {
                            this.$message.error(result.message);
                            return;
                        }
                    })

                    updateWebSizeTitle(this.webSizeInfo.webSizeTitle).then(result => {
                        // check return data
                        if (result.code === success_code) {
                            // change ui
                            this.$message.success(result.message);
                            this.initData();
                        } else {
                            this.$message.error(result.message);
                        }
                    })
                }
            })
        }
    },
    mounted() {
        this.initData();
    }
}
</script>

<style scoped>
.setting-web-info-box {
    max-width: 500px;
}
</style>